<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>精选商品画廊</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #f9fafc;
      color: #1f2937;
      padding: 30px;
    }
    .header {
      text-align: center;
      margin-bottom: 30px;
    }
    h1 {
      font-size: 2.4rem;
      font-weight: 700;
      background: linear-gradient(90deg, #3b82f6, #8b5cf6);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      margin-bottom: 10px;
    }
    .gallery {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 24px;
      max-width: 1400px;
      margin: 0 auto;
    }
    .item {
      background: white;
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 6px 16px rgba(0,0,0,0.08);
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .item:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 24px rgba(0,0,0,0.12);
    }
    .item img {
      width: 100%;
      height: 200px;
      object-fit: cover;
      display: block;
    }
    @media (max-width: 600px) {
      .gallery {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 16px;
      }
      .item img {
        height: 140px;
      }
    }
  </style>
</head>
<body>

  <div class="header">
    <h1>商品图库</h1>
  </div>

  <div class="gallery">
    <!-- 所有图片按您提供的列表 -->
    <div class="item"><img src="images/img1.jpg" alt="img1"></div>
    <div class="item"><img src="images/img4.jpg" alt="img4"></div>
    <div class="item"><img src="images/img5.jpg" alt="img5"></div>
    <div class="item"><img src="images/img26.jpg" alt="img26"></div>
    <div class="item"><img src="images/img33.jpg" alt="img33"></div>
    <div class="item"><img src="images/img46.jpg" alt="img46"></div>
    <div class="item"><img src="images/img49.jpg" alt="img49"></div>
    <div class="item"><img src="images/img50.jpg" alt="img50"></div>
    <div class="item"><img src="images/img55.jpg" alt="img55"></div>
    <div class="item"><img src="images/img56.jpg" alt="img56"></div>
    <div class="item"><img src="images/img61.jpg" alt="img61"></div>
    <div class="item"><img src="images/img62.jpg" alt="img62"></div>
    <div class="item"><img src="images/img69.jpg" alt="img69"></div>
    <div class="item"><img src="images/img73.jpg" alt="img73"></div>
    <div class="item"><img src="images/img75.jpg" alt="img75"></div>
    <div class="item"><img src="images/img76.jpg" alt="img76"></div>
    <div class="item"><img src="images/img78.jpg" alt="img78"></div>
    <div class="item"><img src="images/img86.jpg" alt="img86"></div>
    <div class="item"><img src="images/img87.jpg" alt="img87"></div>
    <div class="item"><img src="images/img88.jpg" alt="img88"></div>
    <div class="item"><img src="images/img91.jpg" alt="img91"></div>
    <div class="item"><img src="images/img92.jpg" alt="img92"></div>
    <div class="item"><img src="images/img95.jpg" alt="img95"></div>
    <div class="item"><img src="images/img96.jpg" alt="img96"></div>
    <div class="item"><img src="images/img99.jpg" alt="img99"></div>
    <div class="item"><img src="images/img101.jpg" alt="img101"></div>
    <div class="item"><img src="images/img103.jpg" alt="img103"></div>
    <div class="item"><img src="images/img152.jpg" alt="img152"></div>
    <div class="item"><img src="images/img154.jpg" alt="img154"></div>
    <div class="item"><img src="images/img155.jpg" alt="img155"></div>
    <div class="item"><img src="images/img158.jpg" alt="img158"></div>
    <div class="item"><img src="images/img160.jpg" alt="img160"></div>
    <div class="item"><img src="images/img161.jpg" alt="img161"></div>
    <div class="item"><img src="images/img165.jpg" alt="img165"></div>
    <div class="item"><img src="images/img176.jpg" alt="img176"></div>
    <div class="item"><img src="images/img179.jpg" alt="img179"></div>
    <div class="item"><img src="images/img181.jpg" alt="img181"></div>
    <div class="item"><img src="images/img187.jpg" alt="img187"></div>
    <div class="item"><img src="images/img198.jpg" alt="img198"></div>
    <div class="item"><img src="images/img202.jpg" alt="img202"></div>
    <div class="item"><img src="images/img205.jpg" alt="img205"></div>
    <div class="item"><img src="images/img211.jpg" alt="img211"></div>
    <div class="item"><img src="images/img214.jpg" alt="img214"></div>
    <div class="item"><img src="images/img217.jpg" alt="img217"></div>
    <div class="item"><img src="images/img218.jpg" alt="img218"></div>
    <div class="item"><img src="images/img220.jpg" alt="img220"></div>
    <div class="item"><img src="images/img226.jpg" alt="img226"></div>
    <div class="item"><img src="images/img227.jpg" alt="img227"></div>
    <div class="item"><img src="images/img235.jpg" alt="img235"></div>
    <div class="item"><img src="images/img239.jpg" alt="img239"></div>
    <div class="item"><img src="images/img240.jpg" alt="img240"></div>
    <div class="item"><img src="images/img244.jpg" alt="img244"></div>
    <div class="item"><img src="images/img248.jpg" alt="img248"></div>
    <div class="item"><img src="images/img251.jpg" alt="img251"></div>
    <div class="item"><img src="images/img257.jpg" alt="img257"></div>
    <div class="item"><img src="images/img266.jpg" alt="img266"></div>
    <div class="item"><img src="images/img268.jpg" alt="img268"></div>
    <div class="item"><img src="images/img275.jpg" alt="img275"></div>
    <div class="item"><img src="images/img278.jpg" alt="img278"></div>
    <div class="item"><img src="images/img281.jpg" alt="img281"></div>
    <div class="item"><img src="images/img282.jpg" alt="img282"></div>
    <div class="item"><img src="images/img284.jpg" alt="img284"></div>
    <div class="item"><img src="images/img295.jpg" alt="img295"></div>
    <div class="item"><img src="images/img296.jpg" alt="img296"></div>
    <div class="item"><img src="images/img297.jpg" alt="img297"></div>
    <div class="item"><img src="images/img298.jpg" alt="img298"></div>
  </div>

</body>
</html>